<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="../lib/element-plus/index.css">
    <style>

        .login-box{
             width: 460px;
             margin-top: 400px;
             margin-left: 600px;
        }

    </style>

</head>
<body>


<div id="app">



    <el-card class="login-box">

         <template #header>
             <h3>用户登录</h3>
         </template>

        <el-form label-width="120px">

            <el-form-item label="用户名">
                 <el-input v-model="user.username"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input v-model="user.password"></el-input>
            </el-form-item>

            <el-form-item >
                <el-button type="primary" @click="btnLoginClick"> 登录</el-button>
            </el-form-item>

        </el-form>

    </el-card>

</div>

</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/element-plus/index.full.js"></script>
<script src="../lib/mock.js"></script>
<script src="../mock/user.js"></script>
<script>
     var app =Vue.createApp({

         data:function (){
              return {
                   user:{
                       username:'',
                       password:''
                   }
              }
         },methods:{
              btnLoginClick:function (){

                  if(this.user.username==user.username
                      &&this.user.password==user.password){

                      location.href = 'list.html';
                  }


              }
         }
     });
     app.use(ElementPlus).mount('#app')


</script>

</html>